<div id="main_container">
    {literal}
    <style type="text/css">
		.legende{margin:0 0 0 44px; padding:0 110px 0 0;}
        .legende label{float:left; margin:0 5px 10px 0; width:80px;}
        .legende div{width:30px; height:13px; float:left; display:inline-block; margin:0 20px 0 0;}
        .legende .lg1{background:#B2C942;}
        .legende .lg2{background:#E81C19;}
        .legende .lg3{background:#5F69BF;}
        .legende .lg4{background:#E2D114;}
        .legende .lg5{background:#76C1B1;}
        .legende .lg6{background:#BA9155;}
        .legende .lg7{background:#BA7C94;}
        .legende .lg8{background:#3BCE79;}
        .legende .lg9{background:#5F9174;}
        </style>
    {/literal}
	{$oZoneHeader}
    
    <div class="main_content">
        {$oZoneTopMenu}
        <div class="center_content">  
            <div class="left_content">
                {$oZoneLeftMenu}
            </div>
    
            <div class="right_content">
        
                <h2>Statistiques - graphique</h2> 
                <form action="{jurl 'statistique~BoGraph:index'}" method="post" name="trie" id="trie">
                    <fieldset>
                        <p>
                            <label>Date début</label>
                            <input type="text" id="datepicker1" value="{$dateDebut}" name="debut" /> &nbsp;
                            <label>Date fin</label>
                            <input type="text" id="datepicker2" value="{$dateFin}" name="fin" /> &nbsp;
                            
                        </p>
                        
                        <p id="btn-trie">
                            <a title="Annuler" href="#" class="bt_green" id="trier"><span class="bt_green_lft"></span><strong>Trier</strong><span class="bt_green_r"></span></a>
                        </p>
                        <p id="error" style="display:none;">Veuillez remplir les champs obligatoires .</p>
                     </fieldset>
                 </form>
                    
                <div id="graph">
                    {if $graph->image}
                        {assign $path = STATISTIQUE_PATH_GRAPH}
                        <img src="{$path}{$graph->image}" alt="" />
                    {else}
                        <p>Données insuffisantes pour générer le graphe</p>
                    {/if}
                </div>
                {if $graph->image}
                    <div class="legende">
                        {if sizeof($graph->formule)}
                            {assign $j = 1}
                            {foreach $graph->formule as $k=>$item }
                                <label>{$lib[$k]} </label><div class="lg{$j}"></div>
                                {assign $j++}
                            {/foreach}
                        {/if}
                    </div>
                {/if}
     
            </div><!-- end of right content-->
        </div>   <!--end of center content -->               

        <div class="clear"></div>
    </div> <!--end of main content-->
	
    
    <div class="footer">
    </div>

</div>

{literal} 
    <script type="text/javascript">
        $(function(){
            $("#datepicker1").datepicker({dateFormat: 'dd/mm/yy'});
            $("#datepicker2").datepicker({dateFormat: 'dd/mm/yy'});

            // clic sur le bouton trier
            $('#trier').click(function () {
                debut = $('#datepicker1').val();
                fin   = $('#datepicker2').val();
                if (debut != '' && fin != '')
                {
                    document.forms["trie"].submit();
                }
                else
                {
                    $('#datepicker1').css('border', 'solid 1px #8D989B');
                    $('#datepicker2').css('border', 'solid 1px #8D989B');
                    if (debut == '')
                    {
                        $('#datepicker1').css('border', 'solid 1px #DD1616');
                    }
                    if (fin == '')
                    {
                        $('#datepicker2').css('border', 'solid 1px #DD1616');
                    }
                    $('#error').show();
                    return false;
                }
                
                
            });
        });
    </script>
    <style type="text/css">
        p#btn-trie {position:relative;top:-49px;right:201px;}
        p#error {font-size:0.8em;color:#DD1616;}
    </style>
{/literal}

